// flexbox布局
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 居中混合
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 文本截断 - 单行
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 文本截断 - 多行
@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// 响应式混合
@mixin respond-to($breakpoint) {
  @if $breakpoint =="phone" {
    @media (max-width: 599px) {
      @content;
    }
  }

  @else if $breakpoint =="tablet" {
    @media (min-width: 600px) and (max-width: 959px) {
      @content;
    }
  }

  @else if $breakpoint =="desktop" {
    @media (min-width: 960px) {
      @content;
    }
  }
}